<template>
    <div class="location">
        <Header></Header>
        <div class="content">
            <div class="search-head tc">
                <transition name="el-zoom-in-top">
                    <div v-show="show" style="padding: 1rem 0">
                        <img src="@/assets/images/logo_black.png" alt="logo">
                    </div>
                </transition>
                <div class="search-input tl">
                    <el-select v-model="select" style="width: 18%"
                               slot="prepend" placeholder="请选择类型">
                        <el-option label="资产名称" value="1"></el-option>
                        <el-option label="资产编号" value="2"></el-option>
                        <el-option label="电子标签" value="3"></el-option>
                        <el-option label="责任人" value="4"></el-option>
                    </el-select>
                    <input type="text" placeholder="请输入查询条件" class="input" v-model="searchCondition">
                    <i class="search-icon" @click="search"></i>
                </div>
                <p class="result-show tl" v-show="!tShow">检测到{{ selectText }}为“{{ searchCondition }}”的{{ assetsNum
                    }}条结果</p>
            </div>
            <el-collapse-transition>
                <div class="search-body" v-show="!tShow">
                    <ul class="box">
                        <li class="item" v-for="item in assetData">
                            <p class="result-head tc">{{ item.areaName }}</p>
                            <div class="result-content">
                                <ul>
                                    <li>
                                        <span>固定资产名称</span>
                                        <span class="red">{{ item.name }}</span>
                                    </li>
                                    <li>
                                        <span>固定资产编号</span>
                                        <span class="red">{{ item.id }}</span>
                                    </li>
                                    <li>
                                        <span>绑定电子标签</span>
                                        <span>{{ item.tagId }}</span>
                                    </li>
                                    <li>
                                        <span>责任人</span>
                                        <span>{{ item.personLiable }}</span>
                                    </li>
                                    <li>
                                        <span>报警开关</span>
                                        <span>
                                        <el-switch
                                            @change="alarmSwitch(item)"
                                            v-model="item.alarmSwitch"
                                            active-color="#0CB5F6"
                                            inactive-color="#999999">
                                        </el-switch>
                                    </span>
                                    </li>
                                    <li>
                                        <span>修改日期</span>
                                        <span>{{ item.updateTime }}</span>
                                    </li>
                                    <li>
                                        <span>备注</span>
                                        <span>{{ item.remark }}</span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-collapse-transition>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/header'

    export default {
        name: "location",
        components: {
            Header
        },
        data() {
            return {
                show: true,
                tShow: true,
                select: '', // 下拉框条件
                searchCondition: '', // 搜索条件
                assetData: [], // 资产信息
                selectText: '固定资产',
                searchConditionText: '',
                assetsNum: 0,
            }
        },
        methods: {
            search() {
                if (this.select === '') {
                    this.$message.error(this.$msgDictionary.query.emptySelect)
                    return
                }
                if (this.searchCondition.trim() === '') {
                    this.$message.error(this.$msgDictionary.query.emptyInput)
                    return
                }
                switch (this.select) {
                    case '1':
                        this.getAssetByName()
                        this.selectText = '资产名称'
                        break
                    case '2':
                        this.getAssetById()
                        this.selectText = '资产编号'
                        break
                    case '3':
                        this.getAssetByLabel()
                        this.selectText = '电子标签'
                        break
                    case '4':
                        this.getAssetByPersonLiable()
                        this.selectText = '责任人'
                        break
                    default:
                        return false
                }
                this.show = false
                let timer = setTimeout(() => {
                    this.tShow = false
                    clearTimeout(timer)
                }, 800)
            },
            getAssetByName() {
                let params = {
                    userId: "",
                    pageSize: 10,
                    pageIndex: 1
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                params.name = this.searchCondition.trim()
                this.$ajax
                    .assets
                    .getAssetsByName(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.assetData = result.result.content
                            this.assetsNum = this.assetData.length
                            if (this.assetData.length === 0) {
                                this.$message.error(this.$msgDictionary.query.emptyResult)
                            }
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            getAssetById() {
                let params = {
                    assetsIdsAndUserId: "",
                    pageSize: 10,
                    pageIndex: 1
                }
                if (localStorage.getItem("user")) {
                    params.assetsIdsAndUserId = this.searchCondition.trim() + "," + JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .assets
                    .getAssetsById(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.assetData = result.result.content
                            this.assetsNum = this.assetData.length
                            if (this.assetData.length === 0) {
                                this.$message.error(this.$msgDictionary.query.emptyResult)
                            }
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            getAssetByLabel() {
                this.$message.error("接口还没有")
            },
            getAssetByPersonLiable() {
                this.$message.error('接口还没有')
            },
            /**
             * 报警开关切换
             * @param row
             */
            alarmSwitch(row){
                let params = {
                    assetsId: row.id,
                    userId: "",
                    alarmSwitch: row.alarmSwitch
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .assets
                    .alarmSwitch(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$message.success(this.$msgDictionary.operation.suc)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            }
        },
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../assets/css/color";

    .content {
        padding: 0.6rem 0.8rem;
        box-sizing: border-box;
        background: $bg_gray;
        height: 90vh;
        .search-head {
            width: 60%;
            margin: 0 auto;
            .search-input {
                height: 0.7rem;
                line-height: 0.7rem;
                vertical-align: bottom;
                margin: 0 auto;
                border: 1px solid $segment;
                border-radius: 0.04rem;
                padding: 0 0.1rem;
                width: 80%;
                position: relative;
                box-shadow: 5px 5px 20px 0 #DBDBDB;
                .input {
                    height: 100%;
                    width: 70%;
                    border: 0;
                    background: transparent;
                    outline: none;
                    padding-left: 0.1rem;
                }
                .search-icon {
                    display: inline-block;
                    width: 50px;
                    height: 50px;
                    cursor: pointer;
                    vertical-align: bottom;
                    background: url("../assets/images/spirit.png") no-repeat -448px -248px;
                    position: absolute;
                    right: 0.1rem;
                    top: 50%;
                    margin-top: -25px;
                }
            }
            .result-show {
                width: 80%;
                margin: 0 auto;
                padding-top: 0.2rem;
                font-size: 0.16rem;
                color: $ph_color;
            }
        }
        .search-body {
            height: 58vh;
            overflow: auto;
            margin-top: 0.7rem;
            .box {
                width: 100%;
                .item {
                    float: left;
                    width: 22%;
                    height: 55vh;
                    margin: 0 0.2rem;
                    margin-bottom: 0.2rem;
                    background: $white;
                    box-shadow: 10px 10px 20px 0 #EEDBDB;
                    .result-head {
                        height: 14vh;
                        background: $bg_black;
                        line-height: 14vh;
                        color: $strong_red;
                        font-size: 0.24rem;
                    }
                    .result-content {
                        height: 41vh;
                        padding: 0.3rem 0.6rem;
                        box-sizing: border-box;
                        li {
                            height: 0.5rem;
                            span {
                                color: $ph_color;
                                &:first-child {
                                    display: inline-block;
                                    width: 1.5rem;
                                }
                                &:last-child {
                                    color: $font_color;
                                }
                                &.red {
                                    color: $strong_red;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
